<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rect</title>
</head>
<body>
<!--
    <rect> 标签可用来创建矩形，以及矩形的变种
        rect 元素的 width 和 height 属性可定义矩形的高度和宽度
        x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
        y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
        rx 和 ry 属性可使矩形产生圆角。
        style 属性用来定义 CSS 属性 分号隔开
            - CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
            - CSS 的 stroke-width 属性定义矩形边框的宽度
            - CSS 的 stroke 属性定义矩形边框的颜色
            - CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
            - CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
            - CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
-->
    <svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100vh">
        <rect x="100" y="100" rx="10" ry="10" width="300" height="300" style="fill: aqua;stroke-width: 10;stroke: beige" />
    </svg>
</body>
</html>
